<template>
  <div class="home_bg">
    <div class="home_creat">+ 新建考试</div>
    <Date-Picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" v-model="times" @on-change="timeChange"></Date-Picker>
    <div class="top_text">
      <span class="spanone">考试信息</span>
      <span class="spantwo">完成状态</span>
      <span class="spanthree">操作</span>
    </div>
    <div class="cell">
      <span class="title">人类清除计划实施方案</span>
      <span class="examtime">考试时间 : {{time}}</span>
      <span class="school">考试学校 : {{schoolname}}</span>
      <span class="subjectname">考试科目 : {{subjectname}}</span>
      <img class="kill" src="@/img/kill.png" >
      <span class="killing">猎杀进行中...</span>
      <div class="jionkill" @click="jionkill">加入猎杀</div>
      <div class="stopkill" @click="stopkill">出手阻止</div>
      <Modal
        v-model="modal1"
        title="提示"
        ok-text="购买"
        @on-ok=""
        @on-cancel="cancel">
        <h1>{{viptitle}}</h1>
      </Modal>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'home',
      data() {
          return {
            name:'',
            viptitle:'战五渣加入只能被猎杀,是否购买强力武器?一刀999,享受猎杀的快感!',
            modal1:false,
            dateTimeStartForm:'',
            dateTimeEndForm:'',
            times:[],
            schoolname:'北京市天安门高级实验大学(人类研究中心)',
            subjectname:'社会'
          }
      },
      created(){
        this.name = this.$route.params.name;
      },
      computed: {
        time: function () {
          return this.dateTimeStartForm +'~'+ this.dateTimeEndForm
        }

      },
      methods :{
        timeChange(){
          var dateTimeStart = new Date(this.times[0]);
          var dateTimeEnd = new Date(this.times[1]);
          this.dateTimeStartForm = dateTimeStart.getFullYear() + '-' + (dateTimeStart.getMonth() + 1) + '-' + dateTimeStart.getDate();
          this.dateTimeEndForm = dateTimeEnd.getFullYear() + '-' + (dateTimeEnd.getMonth() + 1) + '-' + dateTimeEnd.getDate();
        },
        stopkill() {
          this.modal1 = true
          this.viptitle ='少侠请自重,生命只有一次!是否购买VIP成为神一样的存在?'
        },
        jionkill() {
          this.modal1 = true
          this.viptitle ='战五渣加入只能被猎杀,是否购买强力武器?一刀999,享受猎杀的快感!'
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./home.styl"

</style>
